<template>
  <el-link type="primary" @click="download">{{ fileName }}</el-link>
</template>

<script>
import { downloadFile } from '@/utils/request'

export default {
  name: 'ClickDownload',
  props: {
    file: [String, Object]
  },
  data() {
    return {
      fileName: '',
      fileUrl: ''
    }
  },
  watch: {
    file: {
      handler(val) {
        console.log(val)
        if (!val) return
        if (typeof val === 'string' && val.includes('{')) {
          const file = JSON.parse(val)
          this.fileName = file.fileName + '.' + file.fileType
          this.fileUrl = file.fileUrl
        } else if (typeof val === 'object') {
          this.fileUrl = val.fileUrl
          this.fileName = val.fileName ? (val.fileName + '.' + val.fileType) : val.fileUrl
        }
      },
      immediate: true
    }
  },
  methods: {
    download() {
      if (!this.fileUrl) return this.$message.error('下载地址为空')
      downloadFile(this.fileUrl, this.fileName)
    }
  }
}
</script>

<style scoped lang="scss">
</style>
